/* 淡入 */
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* 淡入-从上 */
@keyframes fade-in-top {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

 /* 淡入-从下 */
 @keyframes fade-in-bottom {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 淡入-从右 */
@keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}



/* 淡入-从右 */
@keyframes fade-in-right {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}




/* 缩放动画-宽度从 0 至 1 */
@keyframes scale-w-01 {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}



/* 缩放动画-高度从 0 至 1 */
@keyframes scale-h-01 {
    0% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(0);
    }
}



/* 缩放动画 */
@keyframes scale-wh-01 {
    0% {
        scale: 0;
    }

    100% {
        scale: 1;
    }
}



.transform-origin-left-top {
    transform-origin: left top;
}


.transform-origin-left-center {
    transform-origin: left center;
}

.transform-origin-left-bottom {
    transform-origin: left bottom;
}


.transform-origin-right-top {
    transform-origin: right top;
}

.transform-origin-right-center {
    transform-origin: right center;
}

.transform-origin-right-bottom {
    transform-origin: right bottom;
}


.transform-origin-center {
    transform-origin: center;
}

.transform-origin-center-top {
    transform-origin: center top;
}

.transform-origin-center-bottom {
    transform-origin: center bottom;
}




